html {font-family: sans-serif; -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin: 0; padding: 0; }
fieldset,img{ border: 0;}
input:focus,textarea:focus,select:focus{outline: none}
button,input,optgroup,select,textarea {color: inherit;font: inherit;margin: 0;}
hr {-moz-box-sizing: content-box; box-sizing: content-box;height: 0;}
address,caption,cite,code,dfn,th,var,optgroup{ font-style: normal; font-weight: normal; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; font-family: "Microsoft YaHei"; }
abbr,acronym{ border: 0; font-variant: normal; }
code,kbd,samp,tt{ font-size: 100%; }
input,button,textarea,select{ *font-size: 100%; border:1px solid #ccc;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display: block;}
audio,canvas,progress,video {display: inline-block; vertical-align: baseline;}
body{ background: #fff; color:#333; font: 14px/1.5 'Microsoft YaHei','SimSun',Arial;}
ol,ul,li{ list-style: none; }
table{ border-collapse: collapse; border-spacing: 0; }
caption,th{ text-align: left; }
sup,sub{ font-size: 100%;vertical-align:baseline;line-height: 0;position: relative; }
small {font-size: 80%;}
:link, :visited, ins{ text-decoration: none; }
blockquote,q{quotes: none; }
blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-text-size-adjust: none;}
.clearfix:before,.clearfix:after {display: table;content: " ";}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.lf {float: left;}
.rf {float: right;}
a {background-color: transparent;}
a:active,a:hover{outline: 0;}

/* style.css */
textarea:focus, input:focus {
  border-color: rgba(69, 184, 35, 0.6);
  outline: 0;
  outline: thin dotted \9;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); }
h1{
  font-size: 20px;
  line-height: 60px;
}
header,footer{
  background: #eee;
  text-align: center;
  color:#45B823;
}
.guest-book{
  margin:auto;
  padding:20px 10px;
}
.guest-form{
  max-width:520px;
  margin:0 auto;
}
.form-group{
  margin:20px 0;
  line-height:32px;
}
.form-group .left{
  float:left;
  width:20%;
  min-width: 70px;
}
.form-group .right{
  float:left;
  width:80%;
}
.form-group textarea,.form-group input{
  display: block;
  width:100%;
  padding:2px 6px;
}
.form-group input{
  height:35px;
}
.form-group button{
  display: block;
  width: 100%;
  cursor: pointer;
  line-height: 35px;
  background: #45B823;
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  border:1px solid #fff;
  transition: 300ms;
}
.form-group button:hover{
  background: #fff;
  border:1px solid #45B823;
  color:#45B823;
}
.guest-data{
  max-width:520px;
  margin:50px auto;
}
.guest-data li{
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid #dedede;
}
.guest-data .avatar {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  overflow: hidden;
  background: #ddd;
  margin-top: 5px;
}
.guest-data .data{
  margin-left: 60px;
}
.guest-data p{
  line-height: 28px;
}
.guest-data .name{
  color: #45B823;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guest-data .time{
  color:#999;
}
.guest-data .operate{
  text-align: right;
}
.guest-data .operate a{
  margin-left:5px;
  color:#999;
}
.guest-data .operate a:hover{
  color:#45B823;
}
/*.modify-popup{
  display: none;
}*/
.shade{
  position: fixed;
  width: 100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0,0,0,.6);
  z-index: 999;
}
#modify-form{
  background: #fff;
  padding: 15px;
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 530px;
  z-index: 1000;
}
/*响应式*/
@media (max-width: 380px) {
  .form-group .right{
    width:100%;
  }
}